<!-- 展示 》 插槽 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="className">
      <slot v-if="hasPrefix" name="prefix">{{ prefix }}</slot>

      <slot :score="model" :text="rateText">
        <el-rate :value="model" v-bind="rateProps" />
      </slot>

      <slot v-if="hasSuffix" name="suffix">{{ suffix }}</slot>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import FormRate from '../../form/FormRate'
import mixShow from '../mixShow'

const name = 'ShowRate'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 评分文本
     */
    rateText() {
      const { model, dict, empty } = this
      return CORE.dict(dict, model) || empty
    },

    /**
     * 评分属性
     */
    rateProps() {
      const { className, max, allowHalf, showScore, showText } = this
      const maxStr = `${className}-${max}`
      const scoreStr = showScore ? ` ${className}-${showScore}` : ''
      const textStr = showText ? ` ${className}-${showText}` : ''
      return {
        'disabled-void-icon-class': 'el-icon-star-off',
        ...this.elProps,
        class: `${className}${maxStr}${scoreStr}${textStr}`,
        disabled: true,
        texts: this.dict.map(([, name]) => name),
        max,
        allowHalf,
        showScore,
        showText,
      }
    },

    /**
     * 有效数值列表
     */
    validValues: FormRate.computed.validValues,
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: FormRate.methods,
}
</script>
